// src\views\sendbox\new-manage\NewsPreview.jsx
// 新闻预览
import React, { useEffect, useState } from 'react'
import { Descriptions } from 'antd'
import moment from 'moment'
import axios from 'axios';
export default function NewsPreview(props) {
  const [newInfo, setNewInfo] = useState({});
  useEffect(() => {
    console.log(props.match.params);
    axios.get(`http://localhost:8888/news/${props.match.params.id}?_expand=category&_expand=role`).then(res => {
      setNewInfo(res.data);
    })
  }, [props.match.params.id]);//由于{}!={}，所以useEffect第二个参数不能为对象，否则逻辑会一直执行
  const auditList = ["未审核", '审核中', '已通过', '未通过']
  const publishList = ["未发布", '待发布', '已上线', '已下线']

  const colorList = ["black", "orange", "green", "red"]
  return (
    <div>
      <Descriptions title={newInfo.title}>
        <Descriptions.Item label="创建者">{newInfo.author}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{moment(newInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
        <Descriptions.Item label="发布时间">{newInfo.publishTime ? moment(newInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
        <Descriptions.Item label="区域">{newInfo.region}</Descriptions.Item>
        <Descriptions.Item label="审核状态" ><span style={{ color: colorList[newInfo.auditState] }}>{auditList[newInfo.auditState]}</span></Descriptions.Item>
        <Descriptions.Item label="发布状态" ><span style={{ color: colorList[newInfo.publishState] }}>{publishList[newInfo.publishState]}</span></Descriptions.Item>
        <Descriptions.Item label="访问数量">
          {newInfo.view}
        </Descriptions.Item>
        <Descriptions.Item label="点赞数量">{newInfo.star}</Descriptions.Item>
        <Descriptions.Item label="评论数量">0</Descriptions.Item>
      </Descriptions>
      {/* dangerouslySetInnerHTML可以理解为vue中的v-html */}
      <div dangerouslySetInnerHTML={{ __html: newInfo.content }}
        style={{
          margin: "0 10px",
          padding:'5px',
          border: "1px solid gray"
        }}></div>
    </div>
  )
}
